<template>
  <div>

    <el-form-item label="分类" prop="categoryId">
      <treeselect
        v-model="cate_id"
        :options="treeOptions"
        :multiple="false"
        :searchable="false"
        :show-count="true"
        clearable
        placeholder="选择分类"
        :class="[isfullscreen?'treeselectClass':'treeselectClassZindex']"
        @input="input"
      />
    </el-form-item>

  </div>
</template>
<script>
import { getCategory } from '@/api/articleCategory'

// npm install --save @riophae/vue-treeselect
import treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// 分类数格式，当前分类下面没有子分类的话，要把children删掉
// {
//     "id" : "",
//     "label" : "",
//     "children" : []
// }

export default {
  name: 'Tree',
  components: {
    treeselect
  },
  props: {
    isfullscreen: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      cate_id: null,
      treeValue: null,
      treeOptions: []
    }
  },
  created() {
    // console.log(this.$store.getters.testName)
    getCategory().then(response => {
      this.treeOptions = this.recursiveTree(response.data)
    })
  },
  methods: {
    input(id) {
      this.$emit('getCategoryId', id)
    },

    setCategoryId(id) {
      this.cate_id = id
    },
    // setOptions(val) {
    //   this.treeOptions = this.recursiveTree(val)
    // },
    recursiveTree(tree) {
      // 格式化：清掉空的children，name替换成label
      tree.map(item => {
        // item.label = item.Name
        if (item.children) {
          item.children.map(child => {
            // child.label = child.Name
          })
          this.recursiveTree(item.children)
        } else {
          delete item.children
        }
      })
      return tree
    }
  }
}
</script>

<style scoped>
.treeselectClassZindex{position: relative;z-index: 99999}
.treeselectClass{position: relative;z-index: 0}
</style>

